# Component: Extended Player

Integrated video viewport and interactive playlist

Media Block

![[Pasted image 20260426084005.png]]

### BEM Anatomy

| Type      | Class Name            | Description                                                                                          |
| --------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-extended-player` | The main container. Managing `border-radius` and specific height sync via `.as-equal-height-parent`. |
| Element   | `__layout-row`        | The internal flex/grid row that separates the video stage from the playlist.                         |
| Element   | `__layout-col`        | Grid columns. Modifiers: `--video` (8-col) and `--list` (4-col).                                     |
| Modifier  | `__layout-col--video` | Specifies the primary area for the video player; usually takes up the majority of the width.         |
| Modifier  | `__layout-col--list`  | Specifies the sidebar area for the scrollable playlist.                                              |
| Element   | `__video`             | The `ratio-16x9` container for the active iframe.                                                    |
| Element   | `__list`              | The scrollable `list-group` housing media items.                                                     |
| Element   | `__item`              | A clickable list item representing a media entry.                                                    |
| Modifier  | `__item--active`      | Applies primary theme variable overrides to highlight the currently playing track.                   |
| Element   | `__item-row`          | Internal flex wrapper for playlist items to align thumbnails and text horizontally.                  |
| Element   | `__item-col`          | Individual columns within a list item for specific content types.                                    |
| Modifier  | `__item-col--thumb`   | The column dedicated to the media thumbnail or status icon.                                          |
| Element   | `__thumb`             | Small 16:9 preview image or fallback "play" state within the list.                                   |
| Modifier  | `__item-col--title`   | The column dedicated to the text metadata (Title/Duration).                                          |
| Element   | `__item-title`        | The text label for the media entry. Usually handles text-truncation for long titles.                 |
| Element   | `__pagination`        | Centered container for the "Load More" functionality within the playlist sidebar.                    |
| Element   | `__button`            | The base interaction element for pagination or manual refresh.                                       |
| Modifier  | `__button--load-more` | Styles the button for "infinite" scroll triggers or manual expansion of the playlist.                |

### Layout & Active State

This component utilizes a "Gutter-less" grid (`--bs-gutter-x: 0`) on the main row to create a seamless border between the video player and the playlist.

##### Generated HTML

```html
<div class="as-extended-player">
    <div class="as-extended-player__layout-row row">
        <!-- Player -->
        <div class="as-extended-player__layout-col--video col-md-8">
            <div class="as-extended-player__video ratio ratio-16x9">
                <iframe src="..."></iframe>
            </div>
        </div>

        <!-- Playlist -->
        <div class="as-extended-player__layout-col--list col-md-4">
            <div class="as-extended-player__list list-group">
                <a class="as-extended-player__item as-extended-player__item--active">
                    <!-- Thumbnail & Title -->
                </a>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-extended-player {
  &__item--active {
    // Overriding Bootstrap List Group
    // to use Primary Theme Colors
    --bs-list-group-color: var(--bs-primary-text-emphasis);
    --bs-list-group-bg: var(--bs-primary-bg-subtle);
    --bs-list-group-border-color: var(--bs-primary-border-subtle);
  }

  &__image {
    object-fit: cover; // Prevents distortion
  }
}
```
